<template>
    <div>        
        <el-row>
            <el-card class="card-box">            
                <div>
                    <template>
                       <el-form ref="form" :model="form" :rules="rules" label-width="100px">      
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="SNI名称:" prop="name">
                                        <span slot="label">
                                            <el-tooltip content="Server Name Indication 零个或多个主机名的数组，作为 SNI 与此证书相关联" placement="right-end">
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                            SNI名称:
                                        </span>

                                        <el-input v-model="form.name" placeholder="零个或多个主机名的数组，作为 SNI 与此证书相关联"
                                        ></el-input>
                                    </el-form-item>                    
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="证书">
                                        <el-select v-model="form.certificate.id" placeholder="请选择">
                                            <el-option v-for="cert in certificates" :key="cert.id" :label="cert.id" :value="cert.id"></el-option>
                                        </el-select>                                        
                                    </el-form-item>
                                </el-col>

                            </el-row>

                            
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="标签：" prop="">
                                        <el-tag :key="tag" v-for="tag in form.tags" closable 
                                        :disable-transitions="false" 
                                        @close="handleTagClose(tag)">
                                            {{tag}}
                                        </el-tag>
                                        <el-input v-model="inputTag" placeholder="输入信息服务的标签信息，按enter键 确认"
                                        @keyup.enter.native="handleInputTagConfirm"
                                        @blur="handleInputTagConfirm"
                                        ></el-input>
                                    </el-form-item>                    
                                </el-col>
                            </el-row>

                            
                       </el-form>
                       
                        <el-row type="flex" justify="end">
                            <el-col :span="12">
                                <el-button type="primary" @click="submitForm">{{formSubmitBtnText}}</el-button>
                                <el-button @click="cancel">取 消</el-button>
                            </el-col>
                        </el-row>  
                    </template>
                </div>
            </el-card>
        </el-row>
    </div>
</template>
<script>
import {CertificateList} from '@/api/kong/certificate.js'
import {addSni,updateSni} from '@/api/kong/sni.js'
export default {
    props: {
        operate:{
            type: String,
            required: false,
            default: 'add',
        },
        sniEntity:{
            type: Object,
            required: false,
        }
    },
    data () {
        return {            
            form:{
                name: null,
                tags:[],
                certificate:{
                    id: null
                }
            },
            certificates:[],
            rules:{},
            inputTag:"",
            formSubmitBtnText:"添 加"
        }
    },
    created(){
        this.getCertificates();
        if(this.operate=='add'){
            this.formSubmitBtnText="添 加"
        }
        if(this.operate=='edit'){
            this.formSubmitBtnText="修 改"
        }
        if(this.sniEntity){
            this.form =this.sniEntity || this.form
            // console.log(JSON.stringify(this.form))
            if(!this.form.tags){
                this.form.tags=[]
            }
        }
    },
    methods:{
        getCertificates(){
            CertificateList().then(res=>{
                // console.log("certificates:"+JSON.stringify(res));
                this.certificates=res.rows;
            })
        },
        submitForm(){
            this.$refs['form'].validate(valid => {
                if (!valid) return;

                if(this.operate=="add"){
                    // console.log(this.form);
                    addSni(this.form).then(res =>{
                        // console.log(JSON.stringify(res));
                        // 重置表单
                        this.reset();
                        // 关闭窗口
                        this.$emit('callback',"成功");
                    })
                }
                
                if(this.operate =="edit"){
                    updateSni(this.form).then(res =>{
                        // console.log(JSON.stringify(res));
                        // 重置表单
                        this.reset();
                        this.$emit('callback',"成功");
                    })
                }
            })

        },
        cancel(){
            // 重置表单
            this.reset();
            // 关闭窗口
            this.$emit('callback',"成功");
        },
        reset(){            
            // 表单字段定义
            this.form={
                name: null,
                tags:[],
                certificate:{
                    id: null
                }
            };
            this.resetForm("form");
        },
        // 标签关闭事件
        handleTagClose(tag){
            this.form.tags.splice(this.form.tags.indexOf(tag),1);
        },

        // 标签输入确认事件
        handleInputTagConfirm(){       
            let inputValue=this.inputTag;
            if(inputValue){
                if(this.form.tags.indexOf(inputValue)>-1){
                    this.inputTag="";
                    return;
                }
                this.form.tags.push(inputValue);
            }
            this.inputTag="";
        },
    }
}
</script>